<template>
  <div class="welfare-page">
    <!-- 推荐活动轮播图 -->
    <el-card class="activity-carousel-card">
      <el-carousel :interval="4000" type="card" height="300px">
        <el-carousel-item v-for="item in recommendedActivities" :key="item.id">
          <div class="carousel-content">
            <img :src="item.image" alt="活动图片" class="carousel-image" />
            <div class="overlay">
              <h3>{{ item.title }}</h3>
              <p>{{ item.description }}</p>
              <span class="date">{{ item.date }}</span>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
      <div class="carousel-header">
        <h2>推荐公益服务</h2>
      </div>
    </el-card>

    <!-- 公益服务活动列表 -->
    <el-card class="welfare-activities-list">
      <template #header>
        <div class="card-header">
          <span>最新公益项目</span>
        </div>
      </template>

      <el-row :gutter="20">
        <el-col :span="8" v-for="activity in welfareActivities" :key="activity.id">
          <el-card shadow="hover" class="activity-card">
            <img :src="activity.image" class="activity-image" />
            <div class="activity-info">
              <h3>{{ activity.title }}</h3>
              <p class="type">类型：{{ getTypeText(activity.type) }}</p>
              <p class="desc">{{ activity.desc }}</p>
              <el-button
                v-if="activity.type === 'donation'"
                type="success"
                size="small"
                @click="openDonationDialog(activity)"
              >
                立即捐款
              </el-button>
              <el-button
                v-else-if="activity.type === 'appointment'"
                type="primary"
                size="small"
                @click="openParticipationDialog(activity)"
              >
                立即参与
              </el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-card>

    <!-- 参与对话框 (预约类) -->
    <el-dialog
      v-model="participationDialogVisible"
      title="参与公益活动"
      width="500px"
    >
      <el-form
        ref="participationFormRef"
        :model="participationForm"
        :rules="participationRules"
        label-width="100px"
      >
        <el-form-item label="活动名称">
          <span>{{ selectedActivity?.title }}</span>
        </el-form-item>
        <el-form-item label="您的姓名" prop="name">
          <el-input v-model="participationForm.name" />
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="participationForm.phone" />
        </el-form-item>
        <el-form-item label="活动时间" v-if="selectedActivity?.time">
          <span>{{ selectedActivity?.time }}</span>
        </el-form-item>
        <el-form-item label="活动地点" v-if="selectedActivity?.location">
          <span>{{ selectedActivity?.location }}</span>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="participationDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitParticipation">确认参与</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 捐款对话框 -->
    <el-dialog
      v-model="donationDialogVisible"
      title="公益捐款"
      width="400px"
    >
      <el-form :model="donationForm" label-width="80px">
        <el-form-item label="项目名称">
          <span>{{ selectedActivity?.title }}</span>
        </el-form-item>
        <el-form-item label="捐款金额" prop="amount">
          <el-input-number v-model="donationForm.amount" :min="10" :step="10" />
        </el-form-item>
        <el-form-item label="支付方式">
          <el-radio-group v-model="donationForm.payment_type">
            <el-radio label="credit">信用支付</el-radio>
            <el-radio label="normal">普通支付</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="donationDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmDonation">确认捐款</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

const participationDialogVisible = ref(false)
const donationDialogVisible = ref(false)
const selectedActivity = ref(null)
const participationFormRef = ref(null)

const participationForm = ref({
  name: '',
  phone: '',
})

const participationRules = {
  name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
  ],
}

const donationForm = ref({
  amount: 10,
  payment_type: 'normal'
})

// 模拟推荐活动数据
const recommendedActivities = ref([
  {
    id: 1,
    title: '“为乡村孩子点亮希望”捐款活动',
    description: '您的每一笔捐款，都将成为乡村孩子教育路上的光芒。',
    image: 'https://picsum.photos/id/50/800/300',
    date: '持续进行中'
  },
  {
    id: 2,
    title: '“爱心助老”社区志愿服务',
    description: '为空巢老人提供生活照料、心理慰藉等服务。',
    image: 'https://picsum.photos/id/55/800/300',
    date: '每周三、周五'
  },
  {
    id: 3,
    title: '“环保卫士”绿化行动',
    description: '参与植树、清洁公园等活动，共同守护绿色家园。',
    image: 'https://picsum.photos/id/58/800/300',
    date: '2025.09.20'
  },
  {
    id: 4,
    title: '“健康同行”义诊服务',
    description: '为社区居民提供免费健康咨询和基础医疗服务。',
    image: 'https://picsum.photos/id/59/800/300',
    date: '每月第一个周末'
  }
])

// 模拟公益服务活动数据
const welfareActivities = ref([
  {
    id: 101,
    title: '山区儿童助学金项目',
    desc: '为山区贫困儿童提供教育资助。',
    image: 'https://picsum.photos/id/60/300/200',
    type: 'donation'
  },
  {
    id: 102,
    title: '社区敬老院探访',
    desc: '定期探访敬老院老人，陪伴他们。',
    image: 'https://picsum.photos/id/65/300/200',
    type: 'appointment',
    time: '每周二下午',
    location: 'XX社区敬老院'
  },
  {
    id: 103,
    title: '环境保护宣传大使招募',
    desc: '参与环保知识宣传，提高公众环保意识。',
    image: 'https://picsum.photos/id/68/300/200',
    type: 'appointment',
    time: '2025-08-10 09:00-12:00',
    location: '市中心广场'
  },
  {
    id: 104,
    title: '流浪动物救助捐款',
    desc: '为流浪动物提供食物、医疗和收容。',
    image: 'https://picsum.photos/id/70/300/200',
    type: 'donation'
  }
])

const getTypeText = (type) => {
  if (type === 'donation') return '捐款项目'
  if (type === 'appointment') return '志愿活动'
  return '未知'
}

const openParticipationDialog = (activity) => {
  selectedActivity.value = activity
  Object.assign(participationForm.value, {
    name: '',
    phone: '',
  })
  participationDialogVisible.value = true
}

const submitParticipation = async () => {
  try {
    await participationFormRef.value.validate()
    ElMessage.success(`成功参与活动：${selectedActivity.value.title}，参与人：${participationForm.value.name}，电话：${participationForm.value.phone}`)
    participationDialogVisible.value = false
  } catch (error) {
    ElMessage.error('参与失败，请检查表单填写')
  }
}

const openDonationDialog = (activity) => {
  selectedActivity.value = activity
  Object.assign(donationForm.value, {
    amount: 10,
    payment_type: 'normal'
  })
  donationDialogVisible.value = true
}

const confirmDonation = () => {
  // 模拟支付逻辑
  ElMessage.success(`成功为 ${selectedActivity.value.title} 项目捐款 ¥${donationForm.value.amount}，支付方式：${donationForm.value.payment_type === 'credit' ? '信用支付' : '普通支付'}`)
  donationDialogVisible.value = false
  // 可以在这里模拟信用分增加等
}

onMounted(() => {
  // 可以在这里加载真实的活动数据
})
</script>

<style scoped>
.welfare-page {
  padding: 20px;
  background-color: #f0f2f5;
}

.activity-carousel-card {
  margin-bottom: 20px;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}

.carousel-header {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  color: #fff;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.el-carousel__item {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 24px;
  border-radius: 8px;
  overflow: hidden;
}

.carousel-content {
  position: relative;
  width: 100%;
  height: 100%;
}

.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
  padding: 20px;
  color: #fff;
}

.overlay h3 {
  margin-top: 0;
  margin-bottom: 5px;
}

.overlay p {
  font-size: 14px;
  margin-bottom: 10px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.overlay .date {
  font-size: 12px;
  opacity: 0.8;
}

.welfare-activities-list {
  margin-top: 20px;
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.activity-card {
  margin-bottom: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 8px;
  overflow: hidden;
}

.activity-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.activity-image {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.activity-info {
  padding: 15px;
  text-align: left;
}

.activity-info h3 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 18px;
  color: #333;
}

.activity-info p {
  font-size: 14px;
  color: #666;
  margin: 5px 0;
}
</style> 